<template>
  <div class="container">
    <el-card class="el-box-card">
      <el-form label-width="80px" :model="query">
        <el-row>
          <!-- 搜索区域 -->
          <el-col :span="12">
            <el-form-item label="关键字">
              <el-input
                class="text-box"
                placeholder="根据编号搜索"
                v-model="query.keyword"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- 按钮区域 -->
          <div class="btn-search">
            <el-form-item>
              <el-button size="mini" @click="clearid">清除</el-button>
              <el-button size="mini" type="primary" @click="getRandomsList()"
                >搜索</el-button
              >
            </el-form-item>
          </div>
        </el-row>
      </el-form>
      <!--警告区域  -->
      <el-alert :title="`消息一共${total}条`" show-icon :closable="false">
      </el-alert>
      <!-- 组题列表区域 -->
      <el-table class="text-list" style="width: 100%" :data="RandomsList">
        <el-table-column prop="id" label="编号" width="220px">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="questionType" label="题型">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType == '1'">单选题</span>
            <span v-else-if="scope.row.questionType == '2'">多选题</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column label="题目编号" width="200px">
          <template slot-scope="scope">
            <el-link
              :underline="false"
              type="primary"
              v-for="(item, index) in scope.row.questionIDs"
              :key="index"
              @click="TopicPreview(item.id)"
              >{{ item.number }}</el-link
            >
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="200px">
          <template slot-scope="scope">
            {{ scope.row.addTime | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)" width="120px">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)" width="120px">
        </el-table-column>
        <el-table-column prop="userName" label="录入人"> </el-table-column>
        <el-table-column label="操作">
          <span>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="deletelist"
            ></el-button>
          </span>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        class="page-size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.query.page"
        :page-sizes="[20, 30, 50, 100]"
        :page-size="this.query.pagesize"
        background
        :total="total"
        layout="sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </el-card>

    <!-- 题目预览 -->
    <el-dialog title="题目预览" :visible.sync="Previewdialog" width="70%">
      <QuestionsPreview
        v-if="Previewdialog"
        :questionID="questionID"
        @close="Previewdialog = false"
      />
    </el-dialog>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions'
import QuestionsPreview from '../components/questions-preview'
export default {
  components: {
    QuestionsPreview
  },
  data() {
    return {
      // 请求参数
      query: {
        page: 1, // 当前页数
        pagesize: 20, // 页尺寸
        keyword: '' // 关键字
      },
      total: 0,
      // 组题列表
      RandomsList: [],
      // 控制题目预览窗口的显示与隐藏
      Previewdialog: false,
      questionID: ''
    }
  },
  created() {
    this.getRandomsList()
  },
  methods: {
    async getRandomsList() {
      const { data } = await randoms(this.query)
      // console.log(data)
      this.RandomsList = data.items
      this.total = data.counts
    },
    // 页面尺寸的变化
    handleSizeChange(newsize) {
      this.query.pagesize = newsize
      this.getRandomsList()
    },
    // 页面容量的变化
    handleCurrentChange(newpage) {
      this.query.page = newpage
      this.getRandomsList()
    },
    // 清除按钮
    clearid() {
      this.query.keyword = ''
      this.getRandomsList()
    },
    // 删除题目
    deletelist(id) {
      this.$confirm('此操作该永久删除该题组，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await removeRandoms({ id: id })
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.getRandomsList()
        })
        .catch(err => err)
    },
    TopicPreview(id) {
      console.log(id)
      this.Previewdialog = true
      this.questionID = id
    }
  }
}
</script>

<style scoped lang="scss">
.el-box-card {
  margin: 12px;

  .btn-search {
    float: right;
  }

  .text-box {
    width: 335px;
  }
  .search-box {
    display: flex;
    justify-content: space-between;
  }
  .text-list {
    margin: 15px 0;
  }
  .page-size {
    float: right;
    padding: 15px;
  }
}
</style>
